<#assign base=request.contextPath />

<html>
<head>
    <title>Title</title>
    <!-- Bootstrap -->
    <link href="${base}/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${base}/css/page-learing-index.css"/>
    <style type="text/css">
        #menu {
            font: 20px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
            width: 100%;

        }

        #menu, #menu li {
            list-style: none; /* 将默认的列表符号去掉 */
            padding: 0; /* 将默认的内边距去掉 */
            /* 将默认的外边距去掉 */
            float: left; /* 往左浮动 */
            display: block;
            margin: 20px 10px 5px 5px;
        }
    </style>

</head>
<body>
<#include 'header.ftl'>

<#--<%--我的回答的模态框--%>-->
<div class="modal fade" id="myAnswer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <form method="post" id="answerForm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">回答</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">

                        <textarea id="answerContent" name="content" class="form-control"></textarea>

                        <input type="hidden" value="${question.userId}" name="replyId"/>

                        <input type="hidden" value="${question.id}" name="questionId"/>
                    </div>
                </div>


                <div class="modal-footer">
                    <button id="submitAnswer" type="button" class="btn btn-success">
                        发布
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>


<#--<%--回复回答的模态框--%>-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <form method="post" id="replyForm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">回复</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input name="answerId" type="hidden" id="replysAnswerId">
                        <!--回答id-->
                        <textarea name="content" class="form-control" id="replyContent"></textarea>
                        <!--回复内容-->

                        <input id="answerUserId" name="aimId" type="hidden">
                        <!--被回复的人的id-->
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="submitReply">
                        发布
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>



<div class="container">
    <div class="row" style="padding-top: 15px;">

        <div class="col-sm-9 panel panel-default" style="padding: 10px">
            <div class="col-sm-2">
                <img class="img-circle" src="${question.user.head}">
            </div>
            <div class="col-sm-10">

                <a href='javascript:void(0)'>${question.user.nickname}</a>
                <p>${question.title}</p>
                <input type="hidden" value="${question.id}" id="questionId"/>
            <#--<span style="float: right">${question.createTime}</span>-->
            </div>
        </div>


    <#--<%--我要回答按钮--%>-->
        <div class="col-sm-2 panel panel-default" style="margin-left: 10px">
            <ul id="menu">
                <li>
                    <em>${question.replyNum}</em>
                    <span>回答</span>
                </li>

                <li>
                    <em>${question.browseNum}</em>
                    <span>浏览</span>
                </li>
            </ul>
            <button id="answerMy" type="button" class="btn btn-primary"
                    style="margin: 70px;margin-left: 40px;margin-top: 20px">
                我要回答
            </button>
        </div>
    </div>

    <h3 id="answerSum"></h3>

    <div class="row">
        <div class="col-sm-9 panel panel-default" style="padding: 10px" id="bodyAnswer">

        </div>
    </div>

</body>
<script src="${base}/js/jquery-2.1.4.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="${base}/js/bootstrap.js"></script>

<script>
    var mark = 0;//全局变量给div标签赋值
    //发送回答id至后台查询一个回答对应的所有评论
    function searchReply(id, sign) {

        $.get("${base}/reply/search", {answerId: id},
                function (result) {
                    if (result.code == 200) { //回复不为空
                        $("#ulList").remove();

                        var replyStr = "";
                        replyStr = "<ul id='ulList' class=\"list-group\"></ul>";
                        $("#boxes" + sign).append(replyStr);
                        for (var i = 0; i < result.data.length; i++) {

                            replyStr = "<li class=\"list-group-item\"><div>" +
                                    "<img class=\"img-circle\" src=" + result.data[i].user.head + " />" + //回复者头像
                                    "<a href='javascript:void(0)'>" + result.data[i].user.nickname + "</a>" + //回复者昵称
                                    "<span>回复</span><a>" + result.data[i].aimUser.nickname + "</a>" +
                                    "<p>" + result.data[i].content + "</p>" + //回复内容

                                    "<a href='javascript:void(0)' id='text_reply" + i + "' " +
                                    "onclick='sendAnswerId(" + result.data[i].answerId + "," + result.data[i].userId + ")'>回复</a>" +//回复标签 绑定弹出modal事件
                                    "<span style=\"float: right\">" + result.data[i].createTime + "</span></div></li>";//评论时间
                            $("#ulList").append(replyStr);

                            /*为评论的回复绑定弹出框事件*/
                            $('#text_reply' + i).click(function () {

                                $("#replyContent").val("");
                                $("#myModal").modal();//回复框
                            })
                        }

                    } else if (result.code = 400) {
                        alert("当前回答无评论");
                    }


                }
        )
    }


    //将回复标签绑定的回答id和回答者的userid赋值给隐藏的input框供 添加回复的方法使用
    function sendAnswerId(id, userId) {
        $("#replysAnswerId").val(id);//回答id
        $("#answerUserId").val(userId)//被回复的人的id
    }

    //查询下一页的回答 (点击展开回答按钮的点击事件)
    function nextAnswer(offset, limit) {

        var questionId = $("#questionId").val();
        $.ajax({
            url: "${base}/answer/"+questionId,
            type: "get",
            data: {
                "questionId": questionId,
                "limit": limit,
                "offset": offset
            },
            dataType: "json",
            success: function (result) {
                appendJson(result);
            },
            error: function () {
                alert("ajax响应异常")
            }
        })
    }


    /*拼接回答页面*/
    function appendJson(result) {
        if (result.code == 200) {
            mark++;
            $("#buttonDiv").remove();//删除点击展开按钮的div

            /*拼接回答界面*/
            for (var i = 0; i < result.data.size; i++) {

                var str = "";
                var str2 = "";
                str2 += "<div class='col-sm-2'>"
                str2 += "<img class=\"img-circle\" src=" + result.data.list[i].user.head + "></img></div>"//插入头像
                str += "<div id='boxes" + mark + "' class='col-sm-10'><a href='javascript:void(0)'>" + result.data.list[i].user.nickname + "</a>";//设置用户昵称
                str += "<p>" + result.data.list[i].content + "</p>";//设置用户回答内容

                //插入回复标签 传递回答id和回答者id
                str += "<div><a href='javascript:void(0)' id='reply_text" + mark + "' onclick='sendAnswerId(" + result.data.list[i].id + "," + result.data.list[i].userId + ")'>回复&nbsp;&nbsp;</a>";

                //把查看回复标签属于的mark传给searchReply
                str += "<a href='javascript:void(0)'  onclick='searchReply(" + result.data.list[i].id + "," + mark + ")'>查看回复</a>"
                str += "<span style='float: right'>" + result.data.list[i].createTime + "</span></div><hr></div>";//插入回答创建时间

                $("#bodyAnswer").append(str2);//头像
                $("#bodyAnswer").append(str); //头像右侧部分
                /*为回答的回复绑定弹出框事件*/
                $("#reply_text" + mark).click(function () {

                    $("#replyContent").val("");
                    $("#myModal").modal();

                })


            }//循环结束

            $("#answerSum").html(result.data.total + "回答");//一共有total条回答


            if (!result.data.isLastPage) { //如果当前页不是最后一页,拼接该按钮
                var str3 = "";
                var afternum = result.data.size;//当前页的条数
                if (result.data.nextPage == result.data.pages) { //判断下一页页码是否为最后一页
                    afternum = result.data.total - afternum * result.data.pageNum;//如果是最后一页，剩余条数为总条数-当前页的条数*当前页码
                }

                /*添加点击展开按钮*/
                str3 = "<div id='buttonDiv' class=\"col-sm-12 btn-group\" role=\"group\">" +
                        "<button type=\"button\" onclick='nextAnswer(" + result.data.nextPage + "," + result.data.pageSize + ")' " +
                        "class=\"btn btn-primary col-sm-12\">" +
                        "点击展开下一页<span>" + afternum + "条</span></button></div>";
                $("#bodyAnswer").append(str3);

            }
        } else if (result.code == 400) { //回答为空
            $("#answerSum").html("0回答");

        }
    }


    /*准备函数，dom文档加载后执行*/
    $(function () {
                //执行查询该问题下的所有回答
                var questionId = $("#questionId").val();
                $.ajax({
                            url: "${base}/answer/"+questionId,
                            type: "get",
                            data: {
                                "limit": 5,
                                "offset": 1
                            },
                            dataType: "json",
                            success: function (result) {
                                appendJson(result);
                            }
                        }
                );


                /*回答弹出框事件*/
                $("#answerMy").click(function () {
                            $("#answerContent").val("");//清空textarea
                            $("#myAnswer").modal();
                        }
                );

                /*提交回答事件*/
                $("#submitAnswer").click(function () {
                    var content = $("#answerContent").val();
                    /*判断内容不为空且不能全为空格*/
                    if (content == null || content == "" || content.replace(/\s*/g, "") == "") {
                        alert("回答不能为空!");
                        return;
                    } else {
                        //发送ajax请求插入回答
                        $.ajax({
                                    type: "post",
                                    dataType: "json",
                                    url: "${base}/answer/add",
                                    data: $("#answerForm").serialize(),
                                    success: function (result) {
                                        if (result.code == 200) {
                                            location.reload();//刷新当前页面
                                        } else if (result.code == 400) {
                                            alert("更新回答失败");
                                        } else if (result.code == 300) {
                                            //重定向至登陆页面
                                        }
                                    },
                                    error: function () {
                                        alert("ajax响应失败!");
                                    }
                                }
                        )
                    }
                });

                /*提交回复*/
                $("#submitReply").click(function () {
                    var replyContent = $("#replyContent").val();//获取回复内容
                    //alert($("#answerUserId").val());
                    if (replyContent == null || replyContent == "" || replyContent.replace(/\s*/g, "") == "") {
                        alert("回复不能为空!");
                        return;
                    } else {
                        //发送ajax提交回复
                        $.ajax({
                                    type: "post",
                                    dataType: "json",
                                    url: "${base}/reply/add",
                                    data: $("#replyForm").serialize(),
                                    success: function (result) {
                                        if (result.code == 200) {
                                            /*更新成功，重新查询回复*/
                                            location.reload();//刷新当前页面
                                        } else if (result.code == 400) {
                                            //更新失败
                                            alert("更新回复失败");
                                        }


                                    },
                                    error: function () {
                                        alert("ajax响应异常");
                                    }
                                }
                        )
                    }
                });
            }
    )
</script>
</html>
